<template>
  <div class="Chart">
    <div class="ChartShow">
      <el-carousel type="card"
                   :interval="3000"
                   v-show="img.length === 0?false:true">
        <el-carousel-item v-for="(item,i) in img"
                          :key="i">
          <div>
            <img :src="$upload+'/'+item"
                 height="200px">
            <img src="../../assets/delete.png"
                 class="delete"
                 @click="deleteImg(item)">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="ChartUpload">
      <el-upload drag
                 :action="$upload"
                 :before-upload="$handleBeforeUpload.handleBeforeUpload"
                 :on-success="afterUpload"
                 :show-file-list=false
                 multiple>
        <i class="el-icon-upload"></i>
        <div>将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
  </div>

</template>
<script>
export default {
  data () {
    return {
      img: []
    }
  },
  methods: {
    async deleteImg (item) {
      this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        return this.$http.delete(`rest/Chart/${item}`)
      }).then(res => {
        if (res.status !== 200) {
          return this.$message.error('删除图片失败')
        }
        this.$message.success('删除图片成功')
        this.img.splice(item, 1)
      })
    },
    async afterUpload (file) {
      const res = await this.$http.post('rest/Chart', {
        img: file.url
      })
      if (res.status !== 200) {
        return this.$message.error('上传失败')
      }
      this.$message.success('上传成功')
      this.img.push(file.url)
    },
    async fetch () {
      const res = await this.$http.get('rest/Chart')
      if (res.status !== 200) {
        return this.$message.error('获取图片失败')
      }
      this.img = res.data
    }
  },
  created () {
    this.fetch()
  }
}
</script>
<style lang="less" scoped>
.delete {
  position: absolute;
  left: 39%;
  bottom: 20%;
  width: 40px;
  height: 40px;
}
.Chart {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .ChartShow {
    width: 70%;
  }
}
</style>
